<template>
	<view class="productListBody">
		<view class='productList'>
			<view class='list acea-row row-between-wrapper' v-if="productList.length != 0">
				<view class='item' hover-class='none' v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
					<view class='pictrue'>
						<u-image width="344rpx" height="344rpx" :src="item.image" mode="aspectFit" :loading-icon="imgLoadBG"></u-image>
						<!-- <image :src='item.image' mode="aspectFill" class="morenGoodsBG"></image> -->
					</view>
					<view class='text'>
						<view class="shipaddWarp">
							<image :src="`../../static/images/${option.site}.png`" v-if="item.stockArea == option.id" class="shipadd"
							:class="option.site" v-for="(option,optionIndex) in iconList" :key="optionIndex"></image>
							<text class="shipaddName">{{item.stockAreaName}}</text>
						</view>
						<view class='name line1'>{{item.brand.enName}}</view>
						<view class='name line1' style="font-size: 26rpx;">{{item.storeName}}</view>
						<view class='money font-color'>
							<text>{{$util.ipMoney(item.price).type}}</text>
							<text class='num'>
								<block v-if="appletType==1">{{$util.ipMoney(item.price).num+$util.ipMoney(item.taxAndSecondPrice).num}}</block>
								<block v-else>{{$util.ipMoney(item.price).num}}</block>
							</text>
							<text class="discount" v-if="item.discount">{{item.discount}}</text>
						</view>
					</view>
				</view>
				<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
					<text class='loading iconfont iconjiazai' :hidden='loading==false'></text>
					<text>{{loadTitle}}</text>
				</view>
			</view>
		</view>
		<view class='noCommodity' v-if="productList.length==0">
			<view class='pictrue'>
				<image src='../../static/images/noSearch.png'></image>
				<view class="errorText">没有找到相关商品~</view>
			</view>
		</view>

	</view>
</template>

<script>
	
import {mapGetters} from "vuex";
	let app = getApp();
	import {
		zoneGoodsList,
		zoneHomeGoodsList,
	} from '@/api/store.js';
	export default {
		data() {
			return {
				productList: [],
				where: {
					page: 1,
					limit: 20,
					bannerId: "",
					ZoneId:''
				},
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				type:'',
				imgLoadBG:app.globalData.imgLoadBG,
				appletType:uni.getStorageSync("appletType")
			};
		},
		onLoad: function(options) {
			var that = this
			this.type = options.type
			
			if(options.name){
				uni.setNavigationBarTitle({
					title: options.name
				})
			}
			// 专区为1
			if(options.type){
				that.where.ZoneId = options.id
				that.get_zone_product_list();
			}else{
				that.where.bannerId = options.id
				that.get_product_list();
			}
			
		},
		computed: mapGetters(['iconList']),
		methods: {
			// 去详情页
			godDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
			},
			//查找产品
			get_product_list: function(isPage) {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				uni.showLoading({
					title: '加载中'
				})
				if (isPage === true) that.$set(that, 'productList', []);
				that.loading = true;
				that.loadTitle = '';
				zoneGoodsList(this.where).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = res.data.totalPage <= res.data.page;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
					
					uni.hideLoading()
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
					
					uni.hideLoading()
				});
			},
			get_zone_product_list: function(isPage) {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				uni.showLoading({
					title: '加载中'
				})
				if (isPage === true) that.$set(that, 'productList', []);
				that.loading = true;
				that.loadTitle = '';
				zoneHomeGoodsList(this.where).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.productList);
					let loadend = res.data.totalPage <= res.data.page;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
					
					uni.hideLoading()
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
					
					uni.hideLoading()
				});
			}
		},
		onReachBottom() {
			if (this.productList.length > 0) {
				if(this.type){
					this.get_zone_product_list()
				}else{
					this.get_product_list();
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.productList {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list {
		padding: 0 20rpx;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
		// background: #F6F6F6;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding: 0;
		border-top: 0;
		width: 100%;
		height: 100vh;
		position: relative;
		.pictrue {
			margin:0;
			padding-top: 30vh;
			box-sizing:border-box;
		}
	}

	.discount {
		background-color: #E9D5AC;
		padding: 2rpx 8rpx;
		color: #4C360B;
		border-radius: 4rpx;
		margin-left: 20rpx;
		font-weight: normal;
	}

	.shipaddWarp {
		.shipadd {
			width: 20rpx;
			height: 20rpx;
			vertical-align: middle;
		}
		.shipaddName {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 28rpx;
			margin-left: 6rpx;
			vertical-align: middle;
		}
	}
</style>
